import React, { Component } from 'react'
import { List } from 'antd-mobile'
import { connect } from 'react-redux'
import action from './action'
const Item = List.Item;
class Home extends Component {
  componentDidMount () {
    this.props.getProList()
  }
  render() {
    console.log('home component', this.props)
    const { proList } = this.props
    return (
      <div className="box">
        <header className="header">home header</header>
        <div className="content">
          {
            proList && proList.map(item => (
              <div key = { item.proid } onClick = { () => {
                this.props.history.push('/detail/' + item.proid)
              }}>
                { item.proname }
              </div>
            ))
          }

          <List renderHeader={() => 'Basic Style'} className="my-list">
            <Item extra={'extra content'}>Title</Item>
          </List>

        </div>
      </div>
    )
  }
}

export default connect(
  ({ home: { proList }}) => ({ proList }),
  (dispatch) => ({
    getProList () {
      dispatch(action.getProListAction())
    }
  }))(Home)